<template>
  <div class="uploadExcel">
    <div>excel报表导出</div>
    <p class="tip">此处仅是一个测试，实际业务开发，需要根据需求报表的结构做调整。</p>
    <el-button style="margin: 20px 0" type="primary" @click="exportExcel">一级报表导出</el-button>
    <p></p>
    <el-button style="margin: 20px 0" type="primary" @click="exportTwoExcel">二级报表导出</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElLoading, ElMessageBox } from 'element-plus'
import { DateFormat } from '@/utils/util'

// 报表组件
const excelData = ref([
  {
    id: 1,
    name: '张三',
    age: 9,
    sex: '男',
    grade: '3年级',
    class: '5班',
    time: 1658022829198,
    yuwen: 90,
    shuxue: 70,
    yinyu: 80,
    dili: 50
  },
  {
    id: 2,
    name: '李四',
    age: 10,
    sex: '男',
    grade: '4年级',
    class: '3班',
    time: 1658012829198,
    yuwen: 80,
    shuxue: 80,
    yinyu: 90,
    dili: 55
  },
  {
    id: 3,
    name: '小花',
    age: 10,
    sex: '女',
    grade: '4年级',
    class: '1班',
    time: 1658032829198,
    yuwen: 98,
    shuxue: 90,
    yinyu: 90,
    dili: 60
  },
  {
    id: 4,
    name: '小草',
    age: 9,
    sex: '女',
    grade: '3年级',
    class: '1班',
    time: 1658062829198,
    yuwen: 99,
    shuxue: 100,
    yinyu: 95,
    dili: 70
  }
])

// 一级报表导出
const exceslLoding = ref() as any
const exportExcel = () => {
  ElMessageBox.confirm('你确认导出到Excel吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      exceslLoding.value = ElLoading.service({
        lock: true,
        text: '正在导出，请稍等......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      import('@/vendor/ExportExcel').then((excel) => {
        const tHeader = ['id', '姓名', '年龄', '性别', '年级', '班级', '入学时间', '语文', '数学', '英语', '地理']
        const filterVal = ['id', 'name', 'age', 'sex', 'grade', 'class', 'time', 'yuwen', 'shuxue', 'yinyu', 'dili']
        const data = formatJsonUser(filterVal, excelData.value)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '人员信息'
        })
        exceslLoding.value.close()
      })
    })
    .catch(() => {})
}

// 俩级报表导出
const exportTwoExcel = () => {
  ElMessageBox.confirm('你确认导出到Excel吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      exceslLoding.value = ElLoading.service({
        lock: true,
        text: '正在导出，请稍等......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      import('@/vendor/ExportExcel').then((excel) => {
        const multiHeader = [['人员信息', '', '', '', '', '', '成绩', '', '', '', '']]
        const tHeader = ['年级', '班级', '姓名', '年龄', '性别', '入学时间', '语文', '数学', '英语', '地理']
        const filterVal = ['grade', 'class', 'name', 'age', 'sex', 'time', 'yuwen', 'shuxue', 'yinyu', 'dili']
        const merges = ['A1: F1', 'G1:J1']

        const data = formatJsonUser(filterVal, excelData.value)
        excel.export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: '人员信息'
        })
        exceslLoding.value.close()
      })
    })
    .catch(() => {})
}

const formatJsonUser = (filterVal: any[], jsonData: any[]) => {
  return (
    jsonData &&
    jsonData.map((v) =>
      filterVal.map((j) => {
        if (j === 'time') {
          return DateFormat(v[j])
        }
        return v[j]
      })
    )
  )
}
</script>

<style lang="scss" scoped></style>
